<template>
  <div>
    <div><h1 class="userTitle">用户管理</h1></div>
    <div>
      <a-button type="primary" class="editable-add-btn" @click="deleteUserSelected">一键删除</a-button>
      <a-table
        :rowSelection="{selectedRowKeys: userIdList, onChange: onSelectChange}"
        :columns="columns"
        :dataSource="dataSource"
        :rowKey="record => record.userId"
        bordered>
        <template slot="operation" slot-scope="text, record">
          <div class="editable-row-operations">
            <span>
              <a-button type="primary" @click="showModal(record.userId)">编辑</a-button>
              <a-modal
                title="密码修改"
                v-model="visible"
                :footer="null"
                style="text-align:center;"
                width="350px"
                :destroyOnClose="true"
              >
                <a-form
                  id="components-form-demo-normal-login"
                  :form="form"
                  class="login-form"
                  @submit="handleSubmit"
                >
                  <a-form-item>
                    <a-input
                      v-decorator="[
                        'passwordUpdated',
                        { rules: [{ required: true, message: '请输入密码!'}] }
                      ]"
                      type="password"
                      placeholder="新密码"
                      style="width:80%;"
                    >
                      <a-icon
                        slot="prefix"
                        type="lock"
                        style="color: rgba(0,0,0,.25)"
                      />
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <a-input
                      v-decorator="[
                        'passwordConfirmed',
                        { rules: [{ required: true, message: '请确认密码!'}] }
                      ]"
                      type="password"
                      placeholder="确认密码"
                      style="width:80%;"
                    >
                      <a-icon
                        slot="prefix"
                        type="lock"
                        style="color: rgba(0,0,0,.25)"
                      />
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <a-button
                      type="primary"
                      html-type="submit"
                      class="login-form-button"
                      @click="handleSubmit"
                    >
                      修改
                    </a-button>
                  </a-form-item>
                </a-form>
              </a-modal>
              <a-popconfirm
                v-if="dataSource.length"
                title="确认删除?"
                @confirm="() => deleteById(record.userId)">
                <a href="javascript:;"><a-button type="primary">删除</a-button></a>
              </a-popconfirm>
            </span>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { deleteUserList, deleteByUserId, editByUserId } from '@/api/file'
const columns = [{
  title: '账号',
  dataIndex: 'userId',
  width: '20%',
  scopedSlots: { customRender: 'userId' }
}, {
  title: '密码',
  dataIndex: 'password',
  width: '20%',
  scopedSlots: { customRender: 'password' }
}, {
  title: '创建时间',
  dataIndex: 'createTime',
  width: '20%',
  scopedSlots: { customRender: 'createTime' }
}, {
  title: '更新时间',
  dataIndex: 'updateTime',
  width: '20%',
  scopedSlots: { customRender: 'updateTime' }
}, {
  title: '操作',
  dataIndex: 'operation',
  scopedSlots: { customRender: 'operation' }
}]

export default {
  name: 'User',
  data () {
    return {
      dataSource: [],
      columns,
      userIdList: [],
      visible: false,
      userId: ''
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.axios.get('/api/findAllUser').then((res) => {
      if (res.status) {
        this.dataSource = JSON.parse(res.data)
      }
    })
  },
  methods: {
    showModal (val) {
      this.visible = true
      this.userId = val
    },
    onSelectChange (selectedRowKeys) {
      this.userIdList = selectedRowKeys
    },
    deleteById (val) {
      var param = {
        'userId': val
      }
      deleteByUserId(param).then((res) => {
        this.dataSource = JSON.parse(res.data)
      })
    },
    deleteUserSelected () {
      var param = {
        'userIdList': this.userIdList
      }
      var arr = param.userIdList
      if (arr.length === 0) {
        this.$message.info('请添加选项!')
      } else {
        for (let i = 0; i < arr.length; i++) {
          param.userIdList = arr[i]
          deleteUserList(param).then((res) => {
            this.dataSource = JSON.parse(res.data)
          })
        }
      }
    },
    passwordSubmit () {
      this.handleSubmit()
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          if (values.passwordUpdated !== values.passwordConfirmed) {
            this.$message.info('两次密码不一致!')
          } else {
            var params = {
              'userId': this.userId,
              'passwordUpdated': values.passwordUpdated,
              'passwordConfirmed': values.passwordConfirmed
            }
            editByUserId(params).then((res) => {
              if (res.status) {
                this.visible = false
                this.axios.get('/api/findAllUser').then((res) => {
                  if (res.status) {
                    this.dataSource = JSON.parse(res.data)
                    this.$message.info('修改成功!')
                  }
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style>
.tablelist1{
  font-weight: bold;
  font-size: large
}
.editable-add-btn {
  margin-bottom: 8px;
}
.userTitle{
  text-align: center;
  font-weight: bold
}
.editable-row-operations a {
  margin-right: 8px;
}
</style>
